<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>购物车</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/shop.css">
    <script src="../js/jquery.js"></script>
    <script src="../js/cookie.js"></script>
    <script>
        $(function () {
            var user = cookie.get('user');
            if (user) {
                user = JSON.parse(user);
                user.forEach((elm, i) => {
                    var users = elm.username;
                    console.log(users);
                    $('.un').html(users);
                });
                $('.user').on('click', function () {
                    cookie.set('user', '', -1);
                });
            }
        });
    </script>
    <script>

        var shop = cookie.get('shop');

        if (shop) {
            shop = JSON.parse(shop);
            var idList = shop.map(elm => elm.id).join();
            var num = 0;
            var zj;
            // console.log($('.sub span').html())
            $.ajax({
                type: "get",
                url: "../php/shop.php",
                data: {
                    "idList": idList
                },
                dataType: "json",
                success: function (res) {

                    var template = "";
                    res.forEach((elm, i) => {
                        var pic = JSON.parse(elm.pic);
                        var arr = shop.filter((val, i) => {
                            return val.id === elm.id;
                        });
                        // console.log(arr[0].num);
                        // console.log(pic);
                        template = `
                        <tr class="selected">
                            <td></td>
                            <td class="bar">
                                <input type="checkbox" checked="checked" id="p-${elm.id}">
                            </td>
                            <td class="img">
                                <a href="">
                                    <img src="${pic[3].src}" alt="">
                                </a>
                            </td>
                            <td class="p-title">
                                <a href="">
                                    ${elm.title}
                                </a>
                            </td>
                            <td class="size">
                                S
                            </td>
                            <td class="price">￥<span>${elm.price}</span></td>
                            <td class="num">
                                <i class="t" href="javascript:;"></i>
                                <input type="text" value="${arr[0].num}" maxlength="3" class="number">
                                <i class="b" href="javascript:;"></i>
                            </td>
                            <td>-</td>
                            <td class="sub">￥<span>${((arr[0].num * elm.price).toFixed(2))}</span></td>
                            <td class="del">
                                <a class="dels" href="javascript:;">删除</a>
                            </td>
                        </tr>
                        <tr class="kong"></tr>
                        `;
                        $('tbody').append(template);
                        var num1 = $('.number').val();

                        num += arr[0].num * elm.price;

                    });
                    zj = num.toFixed(2);
                            $('.zj').html(zj);
                    var num1 = $('.number').val();
                   $('.t').on('click', this, function () {
                        num1--;
                        if (num1 <= 0) {
                            num1 = 0;
                        }
                        console.log(num1)
                        $(this).next().val(num1);
                        var xj = (Number($(this).parent().prev().find('span').text()) * num1).toFixed(2);
                        $(this).parent().next().next().find('span').text(xj);

                    })
                    
                       
                        
                    $('.b').on('click', this, function () {
                        num1++;
                        console.log(num1)
                        $(this).prev().val(num1);
                        var xj = (Number($(this).parent().prev().find('span').text()) * num1).toFixed(2);
                        $(this).parent().next().next().find('span').text(xj);
                    });
                    $('.dels').on('cilck',this,function(){
                        console.log(shop);
                        // cookie.set('shop', '', -1);
                    });
                }

            });

        }
    </script>
    <script>
        $(function () {
            var shop = cookie.get('shop');
            var sum = 0;
            if (shop) {
                shop = JSON.parse(shop);
                shop.forEach((elm, i) => {
                    sum += Number(elm.num);
                });
                $('.sum').html(sum);
            }

        })

    </script>
    
</head>

<body>
    <div class="wrap">
        <!-- logo-用户 -->
        <div class="header">
            <div class="logo">
                <a href="../html/fvancl.html">
                    <img src="../img/vancl-logo.png" alt="">
                </a>
            </div>
            <div class="help">
                <a href="javascript:;">帮助中心</a>
            </div>
            <p class="users">
                您好，<a class="un" href="javascript:;"></a>
                <a class="user" href="../html/login.html">退出登录</a>
                |
                <a href="../html/login.html">更换用户</a>
            </p>

        </div>
        <!-- 购买步骤 -->
        <div class="com-n">
            <em>1.我的购物车</em>
            <span>2.填写核对信息单</span>
            <span>3.成功提交订单</span>
        </div>
        <!-- 选中商品 -->
        <div class="commodity">
            <div class="my-s">
                <h2>我的购物车</h2>
            </div>
            <!-- 温馨提示 -->
            <div class="hint">
                <span>温馨提示：</span>
                1.选购清单中的商品无法保留库存，请您及时结算。2.商品的价格和库存将以订单提交时为准。3.促销活动满减优惠将均摊至商品小计中。
            </div>
            <div class="cart-product">
                <div class="pp">
                    <table>
                        <thead>
                            <tr>
                                <th class="first-last"></th>
                                <th class="check">
                                    <input type="checkbox" id="all">
                                    <label for="all">全选</label>
                                </th>
                                <th class="img"></th>
                                <th class="p-title">商品名称</th>
                                <th class="size">尺寸</th>
                                <th class="price">单价</th>
                                <th class="num">数量</th>
                                <th class="yhui">优惠</th>
                                <th class="sub">小计</th>
                                <th class="del">操作</th>
                                <th class="first-last"></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr class="kong"></tr>

                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <div id="close">
            <div class="bar">
                <input type="checkbox" checked="checked" id="all">
                <label for="all">全选</label>
                <a href="javascript:;">删除</a>
                <span>数量总计:
                    <em class="sum">0</em>件
                </span>
                <strong> 您目前可享受全场购物免运费</strong>
            </div>
            <div class="btn-c">
                <a class="go-buy" href="../html/fvancl.html">
                    <<继续购物</a> <a class="sp-cart" href="javascript:;">去结算>>
                </a>
            </div>
            <div class="total">
                产品金额总计(不含运费)：
                <span>
                    ￥<em class="zj"></em>
                </span>
            </div>
        </div>

        <div class="footer">
            <p>Copyright 2007 - 2019 vancl.com All Rights Reserved 京ICP证100557号 京公网安备11010102000579号
                出版物经营许可证新出发京批字第直110138号</p>
            <p>
                <a href="javascript:;">
                    <img src="../img/cert-redlogo.gif.png" alt="中国电子商务诚信单位">
                </a>
                <span>
                    <img src="../img/cert-costumeorg.gif" alt="中国服装协会会员单位">
                </span>
                <a href="javascript:;">
                    <img src="../img/cert-wsjybzzx.gif.png" alt="网上交易保障中心">
                </a>
            </p>
        </div>
    </div>
</body>

</html>